import * as api from '@/services/checkTask';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Col, Divider, Row, TreeSelect, message } from 'antd';
import React, { useRef, useState } from 'react';
import * as c from '@/services/consts';
import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import CheckServer from '@/components/CheckServer';

type VpnServerFormProps = {
  visible: boolean;
  onCancel: () => void;
  onSubmit: () => Promise<void>;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel, onSubmit } =
    props;

  if (!visible) {
    return null;
  }

  const [checkedList, setCheckedList] = useState<any[]>([]);
  const formRef = useRef<ProFormInstance>();

  const handleSubmit = async (record: API.CheckTask) => {    
    if(!checkedList || checkedList.length == 0){
      message.error("请选择用于检测的服务器");
      return;
    }
    if(!record.job){
      message.error("请选择检测类型");
      return;
    }
    if(!record.level){
      message.error("请选择检测级别");
      return;
    }
    let customs = formRef?.current.getFieldValue("customs");
    if(!customs){ // && !record.groupIds && !record.supplierIds
      message.error("检测不能为空");
      return;
    }

    // if(customs){
      customs = customs.replace('\r\n', '\n').split('\n');
      record.customs = customs;
    // }
    record.serverIds = checkedList;
    // console.log(record);
    // return;

    const result = await api.create(record);
    if (result && result.success) {
      onSubmit();
    }
  };


  return (
    <DrawerForm<API.CheckTask>
      open={visible}
      title='自定义检测'
      formRef={formRef}
      autoFocusFirstInput
      width={1224}
      onFinish={handleSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      
      <Row gutter={24} style={{marginTop:10}}>
        <Col span={4}>
          <ProFormSelect
            name='level'
            label="任务等级"
            allowClear={false}
            options={c.CheckLevelOptions}
            mode='single'
            initialValue={c.CheckLevel.Normal.value}
            rules={[{ required: true, message: '请选择任务等级' }]}
          />
        </Col>
        <Col span={4}>
          <ProFormSelect
            name='job'
            label="检测类型"
            allowClear={false}
            options={c.CheckJobManualOptions}
            mode='single'
            initialValue={c.CheckJob.HttpPost.value}
            rules={[{ required: true, message: '请选择检测类型' }]}
            fieldProps={{
              listHeight:600
            }}
          />
        </Col>
      </Row>

      <Row>
        <Col span={24} style={{marginBottom:-20}}>
          <ProFormText
            name="name"
            label="自定义名称"
          />
        </Col>
      </Row>
      

      <Divider orientation="left" orientationMargin={0}>检测服务器</Divider>
      <CheckServer onChange={setCheckedList} width={1100} />



      
      <Divider orientation="left" orientationMargin={0}>自定义检测内容</Divider>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name="customs" 
            label="" fieldProps={{rows:20}} 
            // rules={[{ required: true, message: '请输入检测内容' }]}
          />
        </Col>
      </Row>


    </DrawerForm>
  );
};

export default VpnServerForm;
